<template>
    <div style="position: relative;">
        <div class="table_wrap" ref="table">
            <div class="config_title">
                <div class="config_title_flex">
                    <p class="config_title_zi">
                        网络设备
                    </p>
                </div>
                <p>
                    <span style="margin-right: 20px;">在线设备数量：{{this.cslist3.length}}</span>
                    <span style="margin-right: 20px;">已注册设备数量：{{this.cslist4.length}}</span>
                    <!-- <el-button type="primary" :disabled="this.loading == true" class="consetip"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="range()">
                        <span>范围配置</span>
                    </el-button> -->
                    <el-button type="primary" :disabled="this.loading == true" class="consetip"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="deleteSave(1)">
                        <span>一键删除</span>
                    </el-button>
                    <el-button type="primary" :disabled="this.loading == true" class="consetip"  style="width: 110px; padding: 12px 5px;" @click="addOpen()">
                        <span>手动添加</span>
                    </el-button>
                    <!-- <el-button type="primary" :disabled="this.loading == true" class="consetip"  style="margin-left: 20px;width: 110px; padding: 12px 5px;" @click="scan()">
                        <span>设备扫描</span>
                    </el-button>
                    <el-button type="primary" :disabled="this.loading == true" class="consetip"  style="margin-left: 20px;width: 110px; padding: 12px 5px;" @click="devreset()">
                        <span>全新添加</span>
                    </el-button> -->
                </p>
            </div>
            <el-table
            :data="this.cslist2"
            v-loading="loading"
            :element-loading-text="showtext"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.45)"
            style="width: 100%"
            height="830"
            class="con_table"
            :row-style="getRowClass" 
            :cell-style="getRowClass"
            :header-row-style="getRowClass" 
            :span-method="objectSpanMethod"
            :header-cell-style="getHeaderClass">
                <el-table-column
                label="设备类型"
                header-align="center"
                width="160">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px;cursor: default;" :title="scope.row.typename" >{{ scope.row.typename }}</span>
                    </template>
                </el-table-column>
                <el-table-column  
                label="定位" 
                header-align="center"
                align="center"
                width="80">
                    <template slot-scope="scope">
                        <div class="confixed" @click="changeValue(scope.$index, scope.row, 'flash')"  v-if="scope.row.editlimit != 2 && scope.row.editlimit != 3">
                             <i :class="scope.row.flash ? 'el-icon-location  confiexd_warning':'el-icon-location'"></i>
                             <i class="el-icon-thumb"></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                label="设备名称"
                header-align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'name')" maxlength="20"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                label="uid"
                header-align="center"
                align="center"
                width="200">
                    <template slot-scope="scope">
                        <span style="cursor: default;color: #8b8f99;">{{ scope.row.uid }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                label="mac"
                header-align="center"
                align="center"
                width="200">
                    <template slot-scope="scope">
                        <span style="cursor: default;color: #8b8f99;">{{ scope.row.mac }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                label="IP地址"
                align="center"
                width="200"
                header-align="center">
                    <template slot-scope="scope">
                        <span style="cursor: default;color: #8b8f99;">{{ scope.row.ip }}</span>
                        <!-- <el-input v-model="scope.row.ip" @focus="getDataStop()" @blur="getDataStart()" @change="changeValue(scope.$index, scope.row, 'ip')"></el-input> -->
                    </template>
                </el-table-column>
                <el-table-column
                label="接入时间"
                header-align="center"
                align="center"
                width="200">
                    <template slot-scope="scope">
                        <span style="cursor: default;color: #8b8f99;">{{ scope.row.regtime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                label="网络延迟"
                header-align="center"
                align="center"
                width="150">
                    <template slot-scope="scope">
                        <span class="conlist_time" :style="scope.row.alarmstate == 0 ? 'color: #58ca87;':'color:#c73131'">{{ scope.row.linktime.toFixed(0) }}&nbsp;<span style="font-size: 12px;">ms</span></span>
                    </template>
                </el-table-column>
                <el-table-column  
                label="启用/停用" 
                header-align="center"
                align="center"
                width="150">
                    <template slot-scope="scope">
                        <el-switch
                            @change="changeValue(scope.$index, scope.row, 'ready')"
                            v-model="scope.row.ready"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                label="状态" 
                header-align="center"
                width="150">
                    <template slot-scope="scope">
                        <div class="caozuo">
                            <span class="butstate1" v-if="(scope.row.state == 0) && (scope.row.reginfoerror == false)">已注册设备</span>
                            <span class="butstate2" v-if="scope.row.state == 1">未注册设备</span>
                            <span class="butstate3" v-if="(scope.row.state == 0) && (scope.row.reginfoerror == true)">注册信息异常</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                label="操作" 
                header-align="center"
                align="center"
                width="100">
                    <template slot-scope="scope">
                        <div class="caozuo">
                            <!-- <i class="el-icon-delete" @click="changeValue(scope.$index, scope.row,'dele')"></i> -->
                            <el-button type="primary" size="mini" title="绑定" @click="changeedit(scope.row)">
                                <span>编辑</span> 
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- ip范围配置 -->
        <div v-if="dialogVisible" class="edit_tan">
            <div class="config_edit">
                <div class="edit_close" @click="dialogVisible=false">X</div>
                <div class="edit_title">
                    IP范围配置
                </div>
                <div class="config_edit_flex">
                    <el-form :model="form"  :rules="rules"   label-width="100px">
                        <el-form-item label="起始IP地址" prop="ipStart">
                            <el-input class="config_form" v-model="form.ipStart" placeholder="请输入IP地址(例如192.168.1.55)" @blur="numBlur()"></el-input>
                        </el-form-item>
                        <el-form-item label="终止IP地址"  prop="ipend">
                            <el-input class="config_form" v-model="form.ipend" @blur="endBlur()"></el-input>
                            <p class="zhushi">*请修改IP地址最后一位(起始地址~255)</p>
                        </el-form-item>
                        <el-form-item label="子网掩码"  prop="mask">
                            <el-input class="config_form" v-model="form.mask"></el-input>
                        </el-form-item>
                        <el-form-item label="网关"  prop="gateway">
                            <el-input class="config_form" v-model="form.gateway"></el-input>
                            <p class="zhushi">*网关与子网掩码默认会跟随IP地址的设置自动生成，若不符合需求可手动修改</p>
                        </el-form-item>
                        <el-form-item label="端口号"  prop="port">
                            <el-input class="config_form" v-model="form.port"></el-input>
                        </el-form-item>
                    </el-form>
                </div> 
                <div class="edit_but">
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="save()">
                        <span>确定</span>
                    </el-button>
                </div> 
            </div>
        </div>
        <!-- 手动添加弹框 -->
        <div v-if="dialogAdd" class="edit_tan">
            <div class="config_edit" style="height: 520px;">
                <div class="edit_close" @click="addClose()">X</div>
                <div class="edit_title">
                    设备添加
                </div>
                <div class="config_edit_flex" style="height: 350px;margin-top: 50px;">
                    <el-form :model="addition"  :rules="rules"   label-width="100px">
                        <div class="config_edit_all">
                            <div class="config_edit_left">
                                <el-form-item label="设备类型">
                                    <el-select v-model="addition.type" filterable placeholder="请选择设备类型" @change="changeType">
                                        <el-option :label="item.typename" :value="item.type" v-for="(item,index) in tableData" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                                <div class="check_501" v-if="this.modeType == 1">
                                    <el-checkbox v-model="mode501Type">通用501模块</el-checkbox>
                                </div>
                                <el-form-item label="名称">
                                    <el-input class="config_form" v-model="addition.name"></el-input>
                                </el-form-item>
                                <el-form-item label="地址">
                                    <el-input class="config_form" v-model="addition.addr"></el-input>
                                </el-form-item>
                                <el-form-item label="访问时间(ms)">
                                    <el-input class="config_form" v-model="addition.checktime"></el-input>
                                </el-form-item>
                                
                            </div>
                            <div class="config_edit_left" v-if="this.mode501Type == true">
                                <el-form-item label="IP"  prop="ip">
                                <el-input class="config_form" v-model="addition.ip" placeholder="请输入IP地址(例如192.168.1.55)" @blur="ipBlur(2)"></el-input>
                                </el-form-item>
                                <el-form-item label="子网掩码"  prop="mask">
                                    <el-input class="config_form" v-model="addition.mask"></el-input>
                                </el-form-item>
                                <el-form-item label="网关"  prop="gw">
                                    <el-input class="config_form" v-model="addition.gw"></el-input>
                                    <!-- <p class="zhushi">*网关与子网掩码默认会跟随IP地址的设置自动生成，若不符合需求可手动修改</p> -->
                                </el-form-item>
                                <el-form-item label="端口号">
                                    <el-input class="config_form" v-model="addition.port"></el-input>
                                </el-form-item>
                            </div>
                            <div class="config_edit_left"  v-if="this.modeType == 1 && this.mode501Type == false">
                                <el-form-item label="数据采集网关选择" label-width="150px">
                                    <el-select v-model="modefrom.upuid" filterable placeholder="请选择设备" @change="changeXtg401">
                                        <el-option :label="item.name" :value="item.uid" v-for="(item,index) in xtg401Link" :key="index"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="串口选择" label-width="150px">
                                    <el-radio v-model="modefrom.num" label="1">串口一</el-radio>
                                    <el-radio v-model="modefrom.num" label="2">串口二</el-radio>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form>
                </div> 
                <div class="edit_but" style="margin-top:0px">
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="addsave()">
                        <span>确定</span>
                    </el-button>
                </div> 
            </div>
        </div>
        <!-- 编辑弹框 -->
        <div v-if="dialogEdit" class="edit_tan">
            <div class="config_edit">
                <div class="edit_close" @click="colse()">X</div>
                <div class="edit_title">
                    编辑
                </div>
                <div class="config_edit_flex">
                    <div class="config_edit_card">
                        <div class="config_edit_title" >
                            <i class="el-icon-info"></i>
                            板卡信息：
                        </div>
                        <el-form :model="nowdata"  :rules="rules"   label-width="120px">
                            <div class="config_edit_all">
                                <div class="config_edit_left" v-if="nowdata.editlimit != 3">
                                    <el-form-item label="IP" prop="ip">
                                    <el-input class="config_form" v-model="nowdata.ip" placeholder="请输入IP地址(例如192.168.1.55)" @blur="ipBlur(1)" :disabled = "this.nowdata.editlimit == 1"></el-input>
                                    </el-form-item>
                                    <el-form-item label="子网掩码"  prop="mask">
                                        <el-input class="config_form" v-model="nowdata.mask" :disabled = "this.nowdata.editlimit == 1"></el-input>
                                    </el-form-item>
                                    <el-form-item label="网关"  prop="gw">
                                        <el-input class="config_form" v-model="nowdata.gw" :disabled = "this.nowdata.editlimit == 1"></el-input>
                                        <!-- <p class="zhushi">*网关与子网掩码默认会跟随IP地址的设置自动生成，若不符合需求可手动修改</p> -->
                                    </el-form-item>
                                    <el-form-item label="端口号">
                                        <el-input class="config_form" v-model="nowdata.port" :disabled = "this.nowdata.editlimit == 1"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="config_edit_left" v-if="nowdata.editlimit == 3">
                                    <el-form-item label="数据采集网关">
                                        <el-input class="config_form" v-model="nowdata.updevname" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="串口">
                                        <el-input class="config_form" v-if="nowdata.addr == 2" value="串口一" disabled></el-input>
                                        <el-input class="config_form" v-if="nowdata.addr == 3" value="串口二" disabled></el-input>
                                    </el-form-item>
                                </div>
                                <div class="config_edit_left">
                                    <el-form-item label="设备类型">
                                        <el-input class="config_form" v-model="nowdata.typename" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="名称">
                                        <el-input class="config_form" v-model="nowdata.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址"  v-if="nowdata.editlimit != 3">
                                        <el-input class="config_form" v-model="nowdata.addr" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="访问时间(ms)" >
                                        <el-input class="config_form" v-model="nowdata.checktime"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            
                        </el-form>
                    </div>
                    <div class="config_edit_system" v-if="nowdata.reginfoerror == true">
                        <div class="config_edit_title">
                            <i class="el-icon-info"></i>
                            系统信息：
                        </div>
                        <div class="config_edit_system_flexall">
                            <div class="config_edit_system_flex">
                                <div>IP :</div>
                                <div class="config_edit_system_gray">{{this.nowdata.errorDevInfo.ip}}</div>
                            </div>
                            <div class="config_edit_system_flex">
                                <div>子网掩码 :</div>
                                <div class="config_edit_system_gray">{{this.nowdata.errorDevInfo.mask}}</div>
                            </div>
                            <div class="config_edit_system_flex">
                                <div>网关 :</div>
                                <div class="config_edit_system_gray">{{this.nowdata.errorDevInfo.gw}}</div>
                            </div>
                            <div class="config_edit_system_flex">
                                <div>端口号 :</div>
                                <div class="config_edit_system_gray">{{this.nowdata.errorDevInfo.port}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="edit_but">
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="update(2)" v-if="this.nowdata.state == 0">
                        <span>信息修改</span>
                    </el-button>
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="update(0)" v-if="this.nowdata.state == 1">
                        <span>手动注册</span>
                    </el-button>
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="update(1)" v-if="(this.nowdata.state == 1) && (this.editlimit != 1)">
                        <span>自动注册</span>
                    </el-button>
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="deleteSave(0)" v-if="this.nowdata.state != 1">
                        <span>删除设备</span>
                    </el-button>
                </div>
            </div>
        </div>
        <!-- 删除弹框 -->
        <div v-if="dialogDelete" class="edit_tan">
            <div class="config_delete">
                <div class="edit_close" @click="colseDeletr(0)">X</div>
                <div class="edit_title">
                    删除
                </div>
                <div class="config_delete_flex">
                    <div class="config_delete_nr">
                        <i class="el-icon-question" style="font-size: 22px;"></i>
                        是否确定删除此设备？
                    </div>
                    <div class="config_delete_checked">
                        <span class="config_delete_checked_span" v-if="this.nowdata.editlimit == 2">（同时删除此设备保留的所有历史记录）</span>
                        <el-checkbox v-model="checked"  v-if="this.nowdata.editlimit != 2">同时删除此设备保留的所有历史记录</el-checkbox>
                    </div>
                </div>
                <div class="edit_but">
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="colseDeletr(0)">
                        <span>取消</span>
                    </el-button>
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="editDelete(0)">
                        <span>确定</span>
                    </el-button>
                </div>
            </div>
        </div>
        <!-- 一键删除弹框 -->
        <div v-if="dialogDeleteAll" class="edit_tan">
            <div class="config_delete">
                <div class="edit_close" @click="colseDeletr(1)">X</div>
                <div class="edit_title">
                    删除
                </div>
                <div class="config_delete_flex">
                    <div class="config_delete_nr">
                        <i class="el-icon-question" style="font-size: 22px;"></i>
                        是否确定删除所有设备？
                    </div>
                    <div class="config_delete_checked">
                        <el-checkbox v-model="checked">同时删除所有设备保留的所有历史记录</el-checkbox>
                    </div>
                </div>
                <div class="edit_but">
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="colseDeletr(1)">
                        <span>取消</span>
                    </el-button>
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="handleDelete()">
                        <span>确定</span>
                    </el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
// import devlink from '../../../static/getdevlink.json';
export default {
    data () {
         /*ip正则验证*/
         var validcodeip = (rule, value, callback) => {
            const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('输入格式不合法！'));
            }
        };
        return{
            tableData:[],//设备类型
            rules: {
                ipStart: [{validator:validcodeip,trigger:'blur'}],
                ip: [{validator:validcodeip,trigger:'blur'}],
                submasknet: [{validator:validcodeip,trigger:'blur'}],
                gw: [{validator:validcodeip,trigger:'blur'}],
            },
            form:{
                ipStart: '',
                ipend: '',
                mask: '',
                gateway:'',
                port:''
            },
            layout0:{},//系统信息（自动分配绑定）
            cslist:[],//整理已注册设备列表顺序加id
            cslist2:[],//已注册设备列表（包括异常）
            cslist3:[],//已注册在线设备
            cslist4:[],//已正常注册设备列表
            loading: false,
            dialogVisible:false,
            modeType:0,// 0 其他设备， 1通用采集器
            mode501Type:true,// true：501  false：信号采集器
            xtg401:[],//信号采集器设备列表
            xtg401Link:[],//信号采集器设备列表
            modefrom:{
                upuid:'',
                num:'1'
            },
            timeGetData:'',//接口方法的定时器
            showlock:0,//扫描锁定1  不锁定0
            showtext:'',
            deleteall:0,//一键删除状态，1正在删除中
            state:0,//设备注册状态 0已注册设备  1未注册设备  2注册信息异常
            dialogEdit:false,//编辑弹框
            dialogRegister:false,//注册弹框
            dialogDelete:false,//删除弹框
            checked: false,//删除数据库数据
            dialogDeleteAll:false,//删除所有设备
            dialogAdd:false,//手动添加弹框
            nowdata:{},//当前选中操作的数据 编辑
            addition:{ //添加设备参数
                "typename":"",
                "type":'',
                "addr":1,
                "ip":"",
                "mask":"",
                "gw":"",
                "port":502,
                "name":"",
                "checktime":1000
            }
        }
    },
    created(){
        //6秒后执行定时器进行接口循环
        this.getDataStart()
    },
    methods: {
        //暂停走接口
        getDataStop(){
            console.log('暂停')
            clearInterval(this.timeGetData);
            this.timeGetData = null;
        },
        //开始走接口
        getDataStart(){
            this.getList()
            this.$nextTick(() => {
                this.timeGetData = setInterval(() => {
                    this.getList()
                }, 1500); 
            })
        },
        //循环获取接口
        getList(){
            this.cslist = []
            var params = {
                "getdevlink":"",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                // res.data = devlink//假数据
                // console.log(devlink)
                // res.data.showlock = 0  //假数据
                this.showlock = res.data.showlock //0不锁定  1锁定
                if(this.showlock == 0 && this.deleteall == 0){ // deleteall 删除状态
                    this.loading = false
                }else if(this.showlock == 0 && this.deleteall == 1){
                    this.loading = true
                    this.showtext = "正在删除设备……"
                }else if(this.showlock == 1){
                    this.loading = true
                    this.showtext = "正在扫描设备……"
                }
                //已注册设备列表
                var getdevlink = res.data.getdevlink
                var list = [] //建立空数组方便刷新获取数据，防止列表闪空 （已注册设备包括正常异常）
                if(getdevlink == undefined){//返回结果：{'result':'error(404)'}
                }else{
                    var list401 = []
                    for(var a = 0; a < getdevlink.length; a++){
                        for(var b = 0; b < getdevlink[a].devlink.length; b++){
                            if(getdevlink[a].type == 25){ //. 信号采集器设备
                                var sss = {
                                    name:getdevlink[a].devlink[b].name,//设备名称
                                    uid:getdevlink[a].devlink[b].uid,//设备唯一编号
                                }
                                list401.push(sss)
                            }
                            var link = {
                                type: getdevlink[a].type,//类型编号
                                typename: getdevlink[a].typename,//类型名称
                                ready:getdevlink[a].devlink[b].ready,//使能
                                uid:getdevlink[a].devlink[b].uid,//设备唯一编号
                                addr:getdevlink[a].devlink[b].addr,//地址
                                name:getdevlink[a].devlink[b].name,//设备名称
                                ip:getdevlink[a].devlink[b].ip,//ip地址
                                mask:getdevlink[a].devlink[b].mask,//子网掩码
                                gw:getdevlink[a].devlink[b].gw,//网关
                                port:getdevlink[a].devlink[b].port,//端口号
                                flash:getdevlink[a].devlink[b].flash,//定位
                                linktime:getdevlink[a].devlink[b].linktime,//连接时间
                                regtime:getdevlink[a].devlink[b].regtime,//设备连接到主机的时间 接入时间
                                checktime:getdevlink[a].devlink[b].checktime/1000,   //主机访问终端的循环时间 访问时间间隔
                                mac:getdevlink[a].devlink[b].mac,//mac地址
                                reginfoerror:getdevlink[a].devlink[b].reginfoerror,//注册状态 false正常 true异常
                                errorDevInfo:getdevlink[a].devlink[b].errorDevInfo,//注册异常系统信息
                                alarmstate:getdevlink[a].devlink[b].alarmstate,//false在线  true离线
                                editlimit:getdevlink[a].devlink[b].editlimit,//0 编辑权限和蜂鸣权限正常   1禁止编辑能蜂鸣，主要是网关下设备    2有编辑权限，无蜂鸣权限，通过纯手动添加的设备，不能更改设备类型地址   3只能编辑名字和访问时间 通用采集器 显示选择的信号采集器设备名和选择的串口名
                                updevname:getdevlink[a].devlink[b].updevname == undefined ? '' : getdevlink[a].devlink[b].updevname,//通用采集器绑定的信号采集器设备名称
                                state:0,//已注册设备标志（包括正常和异常）
                            }
                            this.cslist.push(link)
                        }
                    }
                    this.xtg401 = list401
                    let dataInfo = {};
                    var id = 0;
                    this.cslist.forEach((item, index) => {
                        var str = {
                            type:item.type,//类型编号
                            typename:item.typename,//类型名称
                            addr:item.addr,
                            flash:item.flash,
                            checktime:item.checktime,
                            regtime:this.formatDate(item.regtime*1000, 'YYYY-MM-DD H:m:s'),
                            gw:item.gw,
                            ip:item.ip,
                            linktime:item.linktime,
                            mask:item.mask,
                            name:item.name,
                            port:item.port,
                            ready:item.ready,//开启关闭
                            uid:item.uid,
                            mac:item.mac,
                            reginfoerror:item.reginfoerror,
                            errorDevInfo:item.errorDevInfo,
                            alarmstate:item.alarmstate,
                            editlimit:item.editlimit,
                            updevname:item.updevname,
                            state:item.state,
                            id:id++
                        }
                        let { type } = str;
                        if (!dataInfo[type]) {
                            dataInfo[type] = {
                                type,
                                typename:str.typename,
                                id:id++,
                                children: []
                            }
                        }
                        dataInfo[type].children.push(str);
                    });
                    var arr = Object.values(dataInfo);
                    for(var i = 0; i < arr.length; i++){
                        for(var y = 0; y < arr[i].children.length; y++){
                            if(arr[i].children[y].ready == 1){
                                arr[i].children[y].ready = true
                            }else if(arr[i].children[y].ready == 0){
                                arr[i].children[y].ready = false
                            }
                            list.push(arr[i].children[y]) // 生成已注册设备包括正常异常全部列表  增加了参数id，用来同设备排列在一起，界面设备类型合并展示用
                        }
                    }
                    // 生成在线设备列表
                    var list3 = []
                    for(var c = 0; c < list.length; c++){
                        if(list[c].alarmstate == 0){
                            list3.push(list[c])
                        }
                    }
                    this.cslist3 = list3
                    //生成已注册设备列表
                    var list4 = []
                    for(var d = 0; d < list.length; d++){
                        if(list[d].reginfoerror == false){
                            list4.push(list[d])
                        }
                    }
                    this.cslist4 = list4

                }
                //未注册设备列表
                var unregdevlist = res.data.unregdevlist
                if(unregdevlist == undefined){//返回结果：{'result':'error(404)'}
                }else{
                    var list2 = list
                    for(var a = 0; a < unregdevlist.length; a++){
                        for(var b = 0; b < unregdevlist[a].devlink.length; b++){
                            var link2 = {
                                type: unregdevlist[a].type,//类型编号
                                typename: unregdevlist[a].typename,//类型名称
                                ready:unregdevlist[a].devlink[b].ready == 1 ? true :false,//使能
                                uid:unregdevlist[a].devlink[b].uid,//设备唯一编号
                                addr:unregdevlist[a].devlink[b].addr,//地址
                                name:unregdevlist[a].devlink[b].name,//设备名称
                                ip:unregdevlist[a].devlink[b].ip,//ip地址
                                mask:unregdevlist[a].devlink[b].mask,//子网掩码
                                gw:unregdevlist[a].devlink[b].gw,//网关
                                port:unregdevlist[a].devlink[b].port,//端口号
                                flash:unregdevlist[a].devlink[b].flash,//定位
                                linktime:unregdevlist[a].devlink[b].linktime,//连接时间
                                regtime:'',//设备连接到主机的时间 接入时间未注册设备时间为空
                                checktime:unregdevlist[a].devlink[b].checktime/1000,   //主机访问终端的循环时间 访问时间间隔
                                mac:unregdevlist[a].devlink[b].mac,//mac地址
                                reginfoerror:unregdevlist[a].devlink[b].reginfoerror,//注册状态 false正常 true异常
                                errorDevInfo:unregdevlist[a].devlink[b].errorDevInfo,//注册异常系统信息
                                alarmstate:unregdevlist[a].devlink[b].alarmstate,//false在线  true离线
                                editlimit:unregdevlist[a].devlink[b].editlimit,//0 编辑权限和蜂鸣权限正常   1禁止编辑能蜂鸣，主要是网关下设备    2能编辑权限，无蜂鸣权限，通过纯手动添加的设备，只能删除重新添加
                                updevname:unregdevlist[a].devlink[b].updevname == undefined ? '' : unregdevlist[a].devlink[b].updevname,//通用采集器绑定的信号采集器设备名称
                                state:1,//未注册设备标志
                            }
                            list2.push(link2)
                        }
                    }
                }

                this.cslist2 = list2 //生成设备总列表
            })

            
        },
        //关闭手动添加弹框
        addClose(){
            this.dialogAdd = false
            this.addition = {
                "typename":"",
                "type":'',
                "addr":1,
                "ip":"",
                "mask":"",
                "gw":"",
                "port":502,
                "name":"",
                "checktime":1000
            }
        },
        //手动添加
        addOpen(){
            this.modeType = 0// 0 其他设备， 1采集器
            this.mode501Type = true// 0：501  :1：信号采集器
            this.xtg401Link = this.xtg401//更新信号采集器列表
            this.dialogAdd = true
            this.addition = {
                "typename":"",
                "type":'',
                "addr":1,
                "ip":"",
                "mask":"",
                "gw":"",
                "port":502,
                "name":"",
                "checktime":1000
            }
            this.tableData = JSON.parse(localStorage.getItem("全部设备类型")) 
        },
        //选择设备类型赋值设备名称
        changeType(val){
            console.log(val)
            // 找到选中的选项
            this.selectedOption = this.tableData.find(item => item.type === val);
            // 如果找到了对应的选项，则可以获取它的 label 和 value
            if (this.selectedOption) {
                const label = this.selectedOption.typename;
                const value = this.selectedOption.type;
                // 在这里执行其他逻辑，例如更新界面等
                if(value == 16){
                    this.modeType = 1
                    this.mode501Type = false// 0：501  :1：信号采集器
                    this.modefrom.upuid = '' //清空之前选择的信号采集器
                    this.modefrom.num = '1' //清空之前选择的信号采集器
                }else{
                    this.modeType = 0
                    this.mode501Type = true// 0：501  :1：信号采集器
                }
                this.addition.name = label
                this.addition.typename = label
            }
        },
        //数据采集器选择设备类型赋值设备名称
        changeXtg401(val){
            this.modefrom.upuid = val //uid
        },
        //手动添加保存
        addsave(){
            if(this.addition.typename == ''){
                this.$notify({
                    title: '请选择设备类型',
                    type: 'warning',
                    duration: 1500
                }); 
                return false
            }
            if(this.addition.name == ''){
                this.$notify({
                    title: '请填写名称',
                    type: 'warning',
                    duration: 1500
                }); 
                return false
            }
            if(this.addition.checktime < 200){
                this.$notify({
                    title: '访问时间不可小于200ms',
                    type: 'warning',
                    duration: 1500
                }); 
                return false
            }
            if(this.modeType == 1 && this.mode501Type == false){
                var params = {
                    "updatedevinfo":
                    {
                        "uid":this.addition.uid,
                        "typename":this.addition.typename,
                        "addr":this.addition.addr,
                        "upuid":this.modefrom.upuid,
                        "num":Number(this.modefrom.num),
                        "name":this.addition.name,
                        "checktime":Number(this.addition.checktime)*1000,
                    },
                    "cmd": ["serial"],
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
            }else{
                const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
                if (reg.test(this.addition.ip)) {    
                } else {
                    this.$notify({
                        title: 'ip输入不合法',
                        type: 'warning',
                        duration: 1500
                    }); 
                    return false
                }
                if (reg.test(this.addition.mask)) {    
                } else {
                    this.$notify({
                        title: '子网掩码输入不合法',
                        type: 'warning',
                        duration: 1500
                    }); 
                    return false
                }
                if (reg.test(this.addition.gw)) {    
                } else {
                    this.$notify({
                        title: '网关输入不合法',
                        type: 'warning',
                        duration: 1500
                    }); 
                    return false
                }
                if(this.addition.port == ''){
                    this.$notify({
                        title: '请填写端口号',
                        type: 'warning',
                        duration: 1500
                    }); 
                    return false
                }
                var params = {
                    "updatedevinfo":
                    {
                        // "uid":this.addition.uid,
                        "typename":this.addition.typename,
                        "addr":this.addition.addr,
                        "ip":this.addition.ip,
                        "mask":this.addition.mask,
                        "gw":this.addition.gw,
                        "port":this.addition.port,
                        "name":this.addition.name,
                        "checktime":Number(this.addition.checktime)*1000,
                    },
                    "cmd": ["manual"],
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
            }
            
            console.log(params)
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.state == 'ok'){
                    this.$notify({
                        title: '添加完成',
                        type: 'success',
                        duration: 1500
                    });
                    this.addClose()//关闭弹窗
                }else{
                    this.$notify({
                        title: res.data.state,
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        //打开编辑
        changeedit(data){
            this.dialogEdit = true
            this.nowdata = data
        },
        //关闭编辑
        colse(){
            this.dialogEdit = false
            this.nowdata = {}
        },
        //删除弹框
        deleteSave(val){
            if(val == 0){
                this.dialogDelete = true
            }else if(val == 1){
                this.dialogDeleteAll = true
            }
        },
        //关闭删除弹框
        colseDeletr(val){
            if(val == 0){
                this.dialogDelete = false
                this.checked = false
            }else if(val == 1){
                this.dialogDeleteAll = false
                this.checked = false
            }
            
        },
        //删除当前设备
        editDelete(){
            if(this.nowdata.editlimit == 2){
                this.checked = true
            }
            if(this.checked == true){
                var params = {
                    "deletedev":{
                        "uid":this.nowdata.uid,
                        "type":this.nowdata.type,
                        "addr":this.nowdata.addr
                    },
                    dbdelete:1,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.$http.post(this.$baseUrl, params).then((res) => {
                   if(res.data.result == 'ok'){
                        this.$notify({
                            title: '删除成功',
                            type: 'success',
                            duration: 1500
                        });
                        this.dialogEdit = false
                        this.dialogDelete = false
                        this.nowdata = {}
                    }else{
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        }); 
                    }
                });
            }else{
                var params = {
                    "deletedev":{
                        "uid":this.nowdata.uid,
                        "type":this.nowdata.type,
                        "addr":this.nowdata.addr
                    },
                    dbdelete:0,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.$http.post(this.$baseUrl, params).then((res) => {
                   if(res.data.result == 'ok'){
                        this.$notify({
                            title: '删除成功',
                            type: 'success',
                            duration: 1500
                        });
                        this.dialogEdit = false
                        this.dialogDelete = false
                        this.nowdata = {}
                    }else{
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        }); 
                    }
                });  
            }
        },
        //一键删除
        handleDelete() { 
            if(this.checked == true){
                var params = {
                    "deletealldev":'',
                    dbdelete:1,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.loading = true
                this.deleteall = 1 //删除状态
                this.$http.post(this.$baseUrl, params).then((res) => {
                    setTimeout(()=>{
                        this.deleteall = 0 //删除状态维持至少3秒
                    },3000)
                   if(res.data.result == 'ok'){
                        this.$notify({
                            title: '删除成功',
                            type: 'success',
                            duration: 1500
                        });
                        this.dialogDeleteAll = false
                    }else{
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        }); 
                    }
                });
            }else{
                var params = {
                    "deletealldev":'',
                    dbdelete:0,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.loading = true
                this.deleteall = 1 //删除状态
                this.$http.post(this.$baseUrl, params).then((res) => {
                    setTimeout(()=>{
                        this.deleteall = 0 //删除状态维持至少3秒
                    },3000)
                   if(res.data.result == 'ok'){
                        this.$notify({
                            title: '删除成功',
                            type: 'success',
                            duration: 1500
                        });
                        this.dialogDeleteAll = true
                    }else{
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        }); 
                    }
                }); 
            }
        },
        //ip自动补充
        ipBlur(val){
            if(val == 1){
                //截取ip前三段
                var _str = this.nowdata.ip;
                var index = _str.lastIndexOf(".");
                _str = _str.substring(0, index);
                console.log(_str)
                this.nowdata.gw = _str + '.1'
                this.nowdata.mask = '255.255.255.0'
            }else if(val == 2){
                //截取ip前三段
                var _str = this.addition.ip;
                var index = _str.lastIndexOf(".");
                _str = _str.substring(0, index);
                console.log(_str)
                this.addition.gw = _str + '.1'
                this.addition.mask = '255.255.255.0'
            }
        },
        //板卡注册系统
        update(val){
            var cmd = []
            if(val == 0){ // 手动注册
                cmd = ['dev','sys']
            }else if(val == 1){
                cmd = ['auto']
            }else if(val == 2){ //信息修改 
                cmd = ['sys']
            }
            var params = {
                "updatedevinfo":
                    {
                        "uid":this.nowdata.uid,
                        "typename":this.nowdata.typename,
                        "addr":this.nowdata.addr,
                        "ip":this.nowdata.ip,
                        "mask":this.nowdata.mask,
                        "gw":this.nowdata.gw,
                        "port":this.nowdata.port,
                        "name":this.nowdata.name,
                        "checktime":Number(this.nowdata.checktime)*1000,
                    }
                ,
                "cmd": cmd,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            console.log(params)
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.state == 'ok'){
                    this.$notify({
                        title: '操作完成',
                        type: 'success',
                        duration: 1500
                    });
                    this.colse()//关闭弹窗
                }else{
                    this.$notify({
                        title: res.data.state,
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        // 获取ip分配范围
        getSystem(){
            var params = {
                "getlayout":"layout0",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                    var data = res.data.layout0
                    this.layout0 = data
                    this.form.ipStart = data.dhcpfip //起始地址
                    this.form.ipend = data.dhcplip //终止地址
                    this.form.port = data.dhcpport //端口号
                    this.form.mask = data.dhcpmask //网关
                    this.form.gateway = data.dhcpgw //子网掩码
            });
        },
        //手动添加设备弹框
        devadd(){
            this.dialogAdd = true
        },
        //设备扫描
        scan(){
            // 设备扫描接口
            var params = {
                "devrescan":0,//值随机，不做具体参数
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    this.$notify({
                        title: '扫描成功',
                        type: 'success',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '扫描失败',
                        type: 'warning',
                        duration: 1500
                    });  
                }
            });
        },
        //全新添加
        devreset(){
            // 设备扫描接口
            var params = {
                "devreset":0,//值随机，不做具体参数
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    this.$notify({
                        title: '扫描成功',
                        type: 'success',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '扫描失败',
                        type: 'warning',
                        duration: 1500
                    });  
                }
            });
            
        },
        //范围配置编辑弹框
        range(){
            this.dialogVisible = true
            this.getSystem()
        },
        //范围ip判断
        numBlur(){
            //截取ip前三段
            var _str = this.form.ipStart;
            var index = _str.lastIndexOf(".");
            _str = _str.substring(0, index);
            this.form.ipend = _str + '.250'
            this.form.gateway = _str + '.1'
            this.form.mask = '255.255.255.0'
        },
        //范围ip判断
        endBlur(){
            // 起始地址最后一位
            var _str = this.form.ipStart;
            var index = _str.lastIndexOf(".");
            var last = Number(_str.substring(index+1, _str.length));
            // 终止地址最后一位
            var _str2 = this.form.ipend;
            var index2 = _str2.lastIndexOf(".");
            var qian = _str.substring(0, index);
            var last2 = Number(_str2.substring(index2+1, _str2.length))
            if(last2 > 255){
                this.form.ipend = qian + '.255'
                this.$notify({
                    title: '终止地址不能大于255',
                    type: 'warning',
                    duration: 1500
                });  
            }else{
                if(last2 <= last){
                    this.form.ipend = qian + '.250'
                    this.$notify({
                        title: '终止地址不能小于起始地址',
                        type: 'warning',
                        duration: 1500
                    });  
                }else{
                }
            }
        },
        getRowClass(row){
            if(row.rowIndex%2 == 0){
                return `background:none ;
                border:none;
                border-bottom:1px solid #ebeef53d;
                `;
            }else{
                
                return `background:rgba(255, 255, 255, 0.05) ;
                border:none;
                border-bottom:1px solid #ebeef53d;
                `;
            }
        },
        getHeaderClass(){
            return `background:none ;
                border:none ;
                `;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                const _row = this.flitterData(this.cslist2).one[rowIndex]
                return {
                    rowspan: _row,
                    colspan: 1,
                }
            }
        },
         // 合并方法
        flitterData(arr) {
            let spanOneArr = [],
            spanTwoArr = [],
            concatOne = 0
            arr.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                    spanTwoArr.push(1)
                } else {
                    // 只需要将 span_name 修改为自己需要合并的字段名即可
                    if (item.type === arr[index - 1].type) {
                        //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }
                }
            })
            return {
                one: spanOneArr,
            }
        },
        //列表中直接修改内容
        changeValue(index, value, mode){
            var params = {
                "setdevinfo":[
                    {
                        "uid":value.uid,
                        "type":value.type,
                        "addr":value.addr,
                        [mode]:value[mode]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            
            if(mode == 'flash'){//定位
                if(value.flash == false){ //状态处于关闭定位，点击触发打开定位，需要关闭其他定位
                    var arr = [
                        {
                            "uid":value.uid,
                            "type":value.type,
                            "addr":value.addr,
                            flash:true
                        }
                    ]
                    for(var a = 0; a < this.cslist2.length; a++){
                        if(a != index){
                            if(this.cslist2[a].flash == true){
                                var st = {
                                    "uid":this.cslist2[a].uid,
                                    "type":this.cslist2[a].type,
                                    "addr":this.cslist2[a].addr,
                                    "flash":false
                                }
                                arr.push(st)
                                // 接口下发数组整理 
                            }
                        }
                    }
                    params.setdevinfo = arr
                    this.cslist2[index].flash = true
                    localStorage.setItem("定位", JSON.stringify(this.cslist2[index]));
                }else if(value.flash == true){//状态处于打开定位，点击触发关闭定位
                    var arr = [
                        {
                            "uid":value.uid,
                            "type":value.type,
                            "addr":value.addr,
                            flash:false
                        }
                    ]
                    params.setdevinfo = arr
                    this.cslist2[index].flash = false
                }
            }else if(mode == 'ready'){
                if(value.ready == true){
                    params.setdevinfo[0].ready = 1
                }else{
                    params.setdevinfo[0].ready = 0
                }
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result !== 'ok'){
                    this.$notify({
                        title: '保存失败',
                        type: 'warning',
                        duration: 1500
                    });
                }else{
                }
            });
            
        },
        
        
        //ip范围保存
        save(){
            this.layout0.dhcpfip = this.form.ipStart//起始地址
            this.layout0.dhcplip = this.form.ipend//终止地址
            this.layout0.dhcpgw = this.form.gateway//网关
            this.layout0.dhcpmask = this.form.mask//子网掩码
            this.layout0.dhcpport = this.form.port//端口号
            var arr = {
                "dhcpfip":this.layout0.dhcpfip,
                "dhcplip":this.layout0.dhcplip,
                "dhcpgw":this.layout0.dhcpgw,
                "dhcpmask":this.layout0.dhcpmask,
                "dhcpport":this.layout0.dhcpport
            }
            var params = {
                "setlayout":"layout0",
                "layout":arr,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                   if(res.data.result == 'ok'){
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 1500
                        });
                        this.dialogVisible = false
                    }else{
                        this.$notify({
                            title: '保存失败',
                            type: 'warning',
                            duration: 1500
                        }); 
                    }
            });
        },
        
    },
     // 清除定时器
    beforeDestroy() {
        // 停止循环接口
        clearInterval(this.timeGetData);
        this.timeGetData = null;
        // 关闭定位
        let flashData = JSON.parse(localStorage.getItem("定位"))
        if(flashData == null || flashData == undefined || flashData == "null" || flashData == "undefined"){
            
        }else{
            for(var i = 0; i < this.cslist2.length; i++){
                if(this.cslist2[i].uid == flashData.uid && this.cslist2[i].type == flashData.type && this.cslist2[i].addr == flashData.addr){
                    if(this.cslist2[i].flash == true){
                        var params = {
                            "setdevinfo":[
                                {
                                    "uid":flashData.uid,
                                    "type":flashData.type,
                                    "addr":flashData.addr,
                                    "flash":false
                                }
                            ],
                            [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                        }
                        this.$http.post(this.$baseUrl, params).then((res) => {

                        })
                    }
                }
            }
            
        }
        
       
    },
}
</script>

<style scoped>
    .color_red{
        color: #ca505f !important
    }
    .allsave{
        float: right;
        margin: 30px 0px;
    }
    /deep/ .el-dialog__title{
        color: #fff;
    }
    /deep/ .el-button{
        color: #fff;
    }
    /deep/ .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
        color: #b8bcc2;
        background-color: #8e98a170;
        border-color: #8e98a170;
    }
    /* 表格背景 */
    /deep/ .el-table, .el-table__expanded-cell{
        background: none !important;
    }
    /deep/ .el-table tr{
        background-color: #48698796 !important;
    }
    /deep/ .el-table thead{
        color: #fff !important;
    }
    /deep/ .el-table{
        color: #fff !important;
    }
    /deep/ .el-table th, .el-table tr {
        background-color: #ffffff2b !important;
    }
    .table_wrap{
        height: 900px;
        overflow-y: scroll;
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #1515152e !important;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .el-icon-edit-outline{
        font-size: 25px;
        cursor: pointer;
        position: relative;
        top: 2px;
    }
    .el-icon-edit-outline:hover{
        color: #409EFF;
    }
    .el-icon-delete{
        font-size: 24px;
        cursor: pointer;
        position: relative;
        top: -1px;
        margin-left: 22px;
    }
    .el-icon-delete:hover{
        color: #c00000;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before{
        background-color: #ebeef500 !important;
    }
    .el-table__expand-icon{
        color: #fff
    }
    /deep/  .el-button {
    background: rgba(89, 129, 165, 0.8);
    border: none;
}
/* .el-table .cell{
    display: flex;
    align-items: center;
} */
/deep/ .table_wrap .el-input__inner {
        background: none !important;
        color: #fff;
        border: none;
        /* width: 590px; */
        display: inline !important;
    }
/deep/ .table_wrap .el-input.is-disabled .el-input__inner{
    color: #8b8f99;
}
/deep/ .con_table .el-input__inner{
    padding: 0px;
}
/deep/ .el-switch.is-checked .el-switch__core::after{
    top: 1.5px;
}
.conlist_time{
    margin-left: 10px;
    cursor: default;
}
.caozuo{
    display: flex;
    align-items: center;
    /* justify-content: center; */
}
.confixed{
    cursor: pointer;
}
.confixed .el-icon-location{
    font-size: 20px;
}
.confixed .el-icon-thumb{
    font-size: 12px;
    position: relative;
    left: -7px;
    color: #ffffff80;
}
.confiexd_warning{
    animation:  mycolorchange2 1.5s infinite;
    animation-timing-function: linear;
}
@keyframes mycolorchange2{
    0%{
        color: transparent;
    }
    30%{
        color: #79ff20;
    }
    50%{
        color: #c4f19a
    }
    70%{
        color: #dbf858;
    }
    100%{
        color: #79ff20;
    }
}
/* 操作状态显示 */
.butstate1{
    color: #58ca87;
    background: none;
    /* border: 1px solid #fff3; */
}
.butstate2{
    color: #ffa804;
    background: none;
    /* border: 1px solid #ffffff78; */
}
.butstate3{
    color: #ff1b1b;
    background: none;
    /* border: 1px solid #ffffff78; */
}
/* 标题 */
.config_title{
    padding: 0px 30px 20px 30px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}
.config_title_flex{
    display: flex;
    align-items: center;
    height: 100%;
    /* justify-content: space-between; */
}
.config_title_set{
    height: 100%;
    margin-top: 4px;
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: #6b89a93b;
    border-radius: 5px;
}
.config_title_zi{
    letter-spacing: 3px;
    font-size: 22px;
    margin-right: 40px;
}
.config_title_set .el-switch{
    position: relative;
    top: 2px;
}
.conspangray{
    width: 100px;
    font-size: 14px;
    color: #959598;
}
.conspanliang{
    width: 100px;
    font-size: 14px;
    color: #fff;
}
.consetip{
    background-color: #5981a533;
    border: 1px solid #ffffff57;
    color: #fff;
    box-shadow: 0px 0px 19px 1px #5981a5;
}
.consetip:hover{
    background-color: #486885ad;
}
    .config_title_add .el-icon-circle-plus-outline:hover{
        color: #409EFF;
    }
    .config_title2{
    padding: 30px 30px 10px 30px;
}
.config_title2_zi{
    width: 100%;
    letter-spacing: 3px;
    font-size: 22px;
}
.config_title2_add{
    float: right;
    font-size: 30px;
    cursor: pointer;
}
    .config_title2_add .el-icon-circle-plus-outline:hover{
        color: #409EFF;
    }
    /deep/ .el-form-item__label{
    color: #fff;
}
.zhushi{
    color: #ffa143;
    font-size: 12px;
    margin-left: 5px;
}
/* 编辑弹框 */
.edit_tan{
    position: absolute;
    width: 100%;
    height: 940px;
    background: #0000007a;
    top: -20px;
    left: 0;
    display: flex;
    /* align-items: center; */
    justify-content: center
}
/deep/ .el-dialog__body{
    /* padding-top: 10px; */
}
/deep/ .el-form-item{
    margin-bottom: 35px;
}
.config_edit{
    width: 1000px;
    height: 630px;
    background: #677591;
    position: relative;
}
.edit_close{
    position: absolute;
    top: 16px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
}
.edit_title{
    background: #00000033;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    font-size: 18px
}
.config_edit_flex{
    height: 430px;
    overflow-y: scroll;
    margin-top: 30px;
    padding-left: 30px;
}
.config_edit_all{
    display: flex;
    justify-content: left;
}
.config_edit_card{
    /* width: 50%; */
}
.config_edit_system{
}
.config_edit_title{
    color: #fff;
    font-size: 18px;
    padding-bottom: 30px;
}
.config_edit_system_flexall{
    display: flex;
    align-items: center;
    padding-left: 60px;
}
.config_edit_system_flex{
    display: flex;
    align-items: center;
    margin-right: 60px;
}
.config_edit_system_gray{
    color: #bebebe;
    padding-left: 10px;
}
.config_form{
    width: 320px;
}
.edit_but{
    width: 100%;
    height: 60px;
    text-align: right;
    margin-top: 30px;
}
/* 删除弹框 */
.config_delete{
    width: 600px;
    height: 300px;
    background: #677591;
    position: relative;
    margin-top: 40px;
}
.config_delete_flex{
    height: 100px;
    overflow-y: scroll;
    margin-top: 30px;
    padding-left: 30px;
}
.config_delete_nr{
    height: 80px;
    line-height: 80px;
    padding-left: 50px;
}
.config_delete_checked{
    padding-left: 50px;
}
.config_delete_checked_span{
    color: #ffc342;
    margin-left: 10px;
}
/* 复选框样式 */
.el-checkbox {
    color: #fff;
}
/deep/ .config_delete_flex  .el-checkbox__input.is-checked .el-checkbox__inner::after {
    content: "";
    border: 1px solid #ffc342;
    border-left: 0;
    border-top: 0;
}
/deep/ .config_delete_flex  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #ffc342;
    margin-top: 1px;
}
/deep/ .config_delete_flex  .el-checkbox__inner {
    background: transparent;
}
/deep/.config_delete_flex  .el-checkbox__input.is-focus .el-checkbox__inner,
.el-checkbox__inner:hover {
    border-color: #fff;
}
/deep/.config_delete_flex  .el-checkbox__input.is-checked .el-checkbox__inner {
    background: transparent;
    border-color: #ffc342;
}
/deep/ .config_delete_flex  .el-checkbox__inner:hover {
    border-color: #fff;
}
.check_501{
    margin-left: 100px;
    margin-bottom: 10px;
    margin-top: -30px;
}
/deep/ .check_501 .el-checkbox__label{
    font-size: 14px;
}
/deep/ .el-radio__label {
    font-size: 14px;
    padding-left: 10px;
    color: #fff;
}
</style>